<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js测试页面</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-result { margin: 10px 0; padding: 10px; border: 1px solid #ccc; }
        .success { background-color: #d4edda; color: #155724; }
        .error { background-color: #f8d7da; color: #721c24; }
        canvas { border: 1px solid #ccc; margin: 20px 0; }
    </style>
</head>
<body>
    <h1>Chart.js功能测试</h1>
    <div id="results"></div>
    <canvas id="testChart" width="400" height="200"></canvas>
    
    <script src="js/lib/chart.js"></script>
    <script src="js/lib/chartjs-plugin-datalabels.js"></script>
    <script>
        const resultsDiv = document.getElementById('results');
        
        function addResult(message, isSuccess = true) {
            const div = document.createElement('div');
            div.className = `test-result ${isSuccess ? 'success' : 'error'}`;
            div.textContent = message;
            resultsDiv.appendChild(div);
        }
        
        // 测试Chart.js是否加载
        if (typeof Chart !== 'undefined') {
            addResult('✅ Chart.js加载成功');
            
            // 测试插件是否加载
            if (typeof ChartDataLabels !== 'undefined') {
                addResult('✅ ChartDataLabels插件加载成功');
                
                // 注册插件
                Chart.register(ChartDataLabels);
                addResult('✅ ChartDataLabels插件注册成功');
                
                // 创建测试图表
                const ctx = document.getElementById('testChart').getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ['测试1', '测试2', '测试3'],
                        datasets: [{
                            label: '测试数据',
                            data: [12, 19, 3],
                            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            datalabels: {
                                color: '#fff',
                                font: {
                                    weight: 'bold'
                                }
                            }
                        }
                    }
                });
                
                addResult('✅ 测试图表创建成功');
                
            } else {
                addResult('❌ ChartDataLabels插件未加载', false);
            }
        } else {
            addResult('❌ Chart.js未加载', false);
        }
    </script>
</body>
</html>

